<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3</title>
  </head>

  <body>
    <div id="app">
      <!-- 4.   模板中创建img标签，
       用v-bind:src/:src绑定imgUrl，
       v-bind:title/:title绑定msg；
   -->
      <img v-bind:src="imgUrl" v-bind:title="msg" alt="" width="300" />
      <br />
      <img :src="imgUrl" :title="msg" alt="" width="300" />
    </div>

    <script src="vue3.js"></script>
    <script>
      //  1. 引入Vue 3，获取createApp和ref
      const { createApp, ref } = Vue;
      // 2  创建应用，setup中用ref定义imgUrl（图片地址）和msg（标题）；
      const app = createApp({
        setup() {
          const imgUrl = ref(
            "http://gips3.baidu.com/it/u=2489404253,92500118&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
          );

          const msg = ref("这是图片的title");
          return {
            // 3.  返回imgUrl、msg供模板使用；
            imgUrl,
            msg,
          };
        },
      });
      //   5.  挂载应用到#app。
      app.mount("#app");
    </script>
  </body>
</html>
